import React from 'react';
import { Tooltip } from 'antd';
import _ from 'lodash';
import { BaseTable, utils, NumberView, DifferenceDisplayer } from '@/components/BaseTable';

const DifferenceDetail = props => {
  const { allgoodsValueDetail, expandedRowKeys, name } = props;
  const titleTree = [
    {
      name: '(项目/分期/组团/产品构成)',
      key: 'edition',
      colspan: 1,
      rowspan: 4,
    },
    {
      name: '调整后货值 (不含未推售车位)',
      key: 'entireProject',
      colspan: 1 * 4,
      rowspan: 2,
    },
    {
      name: `${name}货值 (不含未推售车位)`,
      key: 'ValueOfUnsoldParkingSpace1',
      colspan: 1 * 4,
      rowspan: 2,
    },
    {
      name: '货值差异 (不含未推售车位)',
      key: 'ValueOfUnsoldParkingSpace2',
      rowspan: 1,
      children: [
        {
          name: '总货值金额差异',
          key: 'ValueOfUnsoldParkingSpace3',
          rowspan: 2,
          colspan: 1,
        },
        {
          name: '房源货值差异',
          key: 'ValueOfUnsoldParkingSpace4',
          colspan: 1 * 4,
        },
        {
          name: '可售车位货值差异',
          key: 'ValueOfUnsoldParkingSpace5',
          colspan: 1 * 3,
        },
      ],
    },
  ];
  const columns = [
    {
      key: 'orgName',
      dataKey: 'orgName',
      width: 280,
      title: '',
      align: 'left',
      frozen: 'left',
      cellRenderer: ({ rowData }) => (
        <Tooltip
          placement="topLeft"
          title={
            rowData.type === 'org_product'
              ? `${rowData.orgName}+${rowData.businessTypeName}+${rowData.freeTypeName}+${rowData.proTypeName}`
              : rowData.orgName
          }
        >
          <div
            style={{
              width: '100%',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
            }}
          >
            {rowData.type === 'org_product'
              ? `${rowData.orgName}${
                  rowData.businessTypeName
                    ? `+${rowData.businessTypeName}+${rowData.freeTypeName}+${rowData.proTypeName}`
                    : ''
                }`
              : rowData.orgName}
          </div>
        </Tooltip>
      ),
    },
    // 调整后货值
    {
      key: 'afterRoomNum',
      dataKey: 'afterRoomNum',
      align: 'right',
      width: 120,
      headerRenderer: () => (
        <div>
          <div>套数/个数</div>
          <div>(套/个)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        if (rowData.isParking) {
          return [rowData.afterParkingNum];
        }
        return [rowData.afterRoomNum, rowData.afterParkingNum];
      },
      cellRenderer: <NumberView precision={0} />,
    },
    {
      key: 'afterArea',
      dataKey: 'afterArea',
      align: 'right',
      width: 110,
      headerRenderer: () => (
        <div>
          <div>面积</div>
          <div>(平米)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => (rowData.isParking ? [] : [rowData.afterArea]),
      cellRenderer: <NumberView precision={2} />,
    },
    {
      key: 'totalValue3',
      dataKey: 'totalValue3',
      align: 'right',
      width: 130,
      headerRenderer: () => (
        <div>
          <div>均价</div>
          <div>(元/平米,个)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        if (rowData.isParking) {
          return [rowData.afterParkingAvgPrice];
        }
        return [rowData.afterHouseAvgPrice, rowData.afterParkingAvgPrice];
      },
      cellRenderer: <NumberView precision={0} />,
    },
    {
      key: 'houseCommodityValueCount4',
      dataKey: 'houseCommodityValueCount4',
      align: 'right',
      width: 240,
      headerRenderer: () => (
        <div>
          <div>金额</div>
          <div>(万元：合计/房源/车位)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        if (rowData.type === 'org_product') {
          return rowData.isParking
            ? [
                rowData.afterParkingPrice
                  ? rowData.afterParkingPrice / 10000
                  : rowData.afterParkingPrice,
              ]
            : [rowData.afterHousePrice ? rowData.afterHousePrice / 10000 : rowData.afterHousePrice];
        }
        return [
          rowData.afterTotalPrice ? rowData.afterTotalPrice / 10000 : rowData.afterTotalPrice,
          rowData.afterHousePrice ? rowData.afterHousePrice / 10000 : rowData.afterHousePrice,
          rowData.afterParkingPrice ? rowData.afterParkingPrice / 10000 : rowData.afterParkingPrice,
        ];
      },
      cellRenderer: <NumberView precision={0} />,
    },
    // 调整前货值
    {
      key: 'totalValue5',
      dataKey: 'totalValue5',
      align: 'right',
      width: 120,
      headerRenderer: () => (
        <div>
          <div>套数/个数</div>
          <div>(套/个)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        if (rowData.isParking) {
          return [rowData.beforeParkingNum];
        }
        return [rowData.beforeRoomNum, rowData.beforeParkingNum];
      },
      cellRenderer: <NumberView precision={0} />,
    },
    {
      key: 'houseCommodityValueCount6',
      dataKey: 'houseCommodityValueCount6',
      align: 'right',
      width: 110,
      headerRenderer: () => (
        <div>
          <div>面积</div>
          <div>(平米)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => (rowData.isParking ? [] : [rowData.beforeArea]),
      cellRenderer: <NumberView precision={2} />,
    },
    {
      key: 'totalValue7',
      dataKey: 'totalValue7',
      align: 'right',
      width: 130,
      headerRenderer: () => (
        <div>
          <div>均价</div>
          <div>(元/平米,个)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        if (rowData.isParking) {
          return [rowData.beforeParkingAvgPrice];
        }
        return [rowData.beforeHouseAvgPrice, rowData.beforeParkingAvgPrice];
      },
      cellRenderer: <NumberView precision={0} />,
    },
    {
      key: 'houseCommodityValueCount8',
      dataKey: 'houseCommodityValueCount8',
      align: 'right',
      width: 240,
      headerRenderer: () => (
        <div>
          <div>金额</div>
          <div>(万元：合计/房源/车位)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        if (rowData.type === 'org_product') {
          return rowData.isParking
            ? [
                rowData.beforeTotalPrice
                  ? rowData.beforeTotalPrice / 10000
                  : rowData.beforeTotalPrice,
              ]
            : [
                rowData.beforeHousePrice
                  ? rowData.beforeHousePrice / 10000
                  : rowData.beforeHousePrice,
              ];
        }
        return [
          rowData.beforeTotalPrice ? rowData.beforeTotalPrice / 10000 : rowData.beforeTotalPrice,
          rowData.beforeHousePrice ? rowData.beforeHousePrice / 10000 : rowData.beforeHousePrice,
          rowData.beforeParkingPrice
            ? rowData.beforeParkingPrice / 10000
            : rowData.beforeParkingPrice,
        ];
      },
      cellRenderer: <NumberView precision={0} />,
    },
    // 货值差异
    {
      key: 'houseCommodityValueCount9',
      dataKey: 'houseCommodityValueCount9',
      align: 'right',
      title: '',
      width: 300,
      headerRenderer: () => (
        <div>
          <div>s</div>
          <div>(万元)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.totalDiff}`.replace('%', '')) / 10000,
          percentage: _.toNumber(`${rowData.totalDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
    // 房源货值差异
    {
      key: 'houseCommodityValueCount10',
      dataKey: 'houseCommodityValueCount10',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>金额差异</div>
          <div>(万元)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.priceDiff}`.replace('%', '')) / 10000,
          percentage: _.toNumber(`${rowData.priceDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
    {
      key: 'houseCommodityValueCount11',
      dataKey: 'houseCommodityValueCount11',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>均价差异</div>
          <div>(元/平米)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.avgPriceDiff}`.replace('%', '')) * 1,
          percentage: _.toNumber(`${rowData.avgPriceDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
    {
      key: 'houseCommodityValueCount12',
      dataKey: 'houseCommodityValueCount12',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>面积差异</div>
          <div>(平米)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.areaDiff}`.replace('%', '')) * 1,
          percentage: _.toNumber(`${rowData.areaDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={2} />,
    },
    {
      key: 'houseCommodityValueCount13',
      dataKey: 'houseCommodityValueCount13',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>套数差异</div>
          <div>(套)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.numDiff}`.replace('%', '')) * 1,
          percentage: _.toNumber(`${rowData.numDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
    // 可售车位货值差异
    {
      key: 'houseCommodityValueCount14',
      dataKey: 'houseCommodityValueCount14',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>金额差异</div>
          <div>(万元)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.parkingPriceDiff}`.replace('%', '')) / 10000,
          percentage: _.toNumber(`${rowData.parkingPriceDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
    {
      key: 'houseCommodityValueCount15',
      dataKey: 'houseCommodityValueCount15',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>均价差异</div>
          <div>(元/个)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.parkingAvgPriceDiff}`.replace('%', '')),
          percentage: _.toNumber(`${rowData.parkingAvgPriceDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
    {
      key: 'houseCommodityValueCount16',
      dataKey: 'houseCommodityValueCount16',
      align: 'right',
      width: 180,
      headerRenderer: () => (
        <div>
          <div>车位数差异</div>
          <div>(个)</div>
        </div>
      ),
      dataGetter: ({ rowData }) => {
        const obj = {
          value: _.toNumber(`${rowData.parkingNumDiff}`.replace('%', '')),
          percentage: _.toNumber(`${rowData.parkingNumDiffPer}`.replace('%', '')) * 100,
        };
        return obj;
      },
      cellRenderer: <DifferenceDisplayer precision={0} />,
    },
  ];
  const headerRenderer = utils.getHeaderRenderer(titleTree, 2);

  return allgoodsValueDetail && allgoodsValueDetail.length > 0 ? (
    <BaseTable
      expandColumnKey="orgName"
      defaultExpandedRowKeys={expandedRowKeys}
      fixHeight={350}
      columns={columns}
      headerHeight={[30, 30, 60]}
      headerRenderer={headerRenderer}
      treeData={allgoodsValueDetail}
    />
  ) : null;
};

export default DifferenceDetail;
